<script>
import {ajax,hasPermission} from 'framework'
import { clipboard } from 'heyui';

const getEaseToken = () => {
  let store = localStorage.getItem("user.token");
  if (!store) {
    return ""
  } else {
    return JSON.parse(JSON.parse(store).v)
  }
}

const allLeaf = (data) => {
  let ret = []
  for (let d of data) {
    if (d.leaf) {
      ret.push(d)
    } else if (d.children) {
      ret.push(...allLeaf(d.children))
    }
  }
  return ret;
}

export default {
  name: "DataEase",
  components: {},
  data() {
    return {
      hasControlPer:hasPermission('platform.dataease.control'),
      dataV: []
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    openControlBoard() {
      ajax.get('/ease/getToken').then(r => {
        let data = {
          c: Date.now(),
          e: 253402300799000,
          v: JSON.stringify(r.data)
        }
        localStorage.setItem("user.token", JSON.stringify(data))
        open("./ease/", "_blank")
      })
    },
    async loadData() {
      //获取大屏数据
      let dataV = await  ajax.get("ease/boards",{busiFlag: "dataV"})
      this.dataV = allLeaf(dataV.data)
    //  console.log(this.dataV)
      //获取仪表盘数据
      let dashboard = await  ajax.get("ease/boards",{busiFlag: "dashboard"})
      this.dataV.push(...allLeaf(dashboard.data))

    },
    /**
     * 获取大屏信息，链接，密码
     * ```typescript
     * type InfoType={
     *   uuid:String
     *   pwd:String
     *   enc:String
     * }
     * let resp = await ajax.get("ease/shareDetail/${id}")
     * let info:InfoType = resp.data
     * if (info.pwd){
     *    let uuid =i nfo.uuid
     *    let encData = {
     *      c: Date.now(),
     *      e: 253402300799000,
     *      v: JSON.stringify(info.enc)
     *    }
     *    localStorage.setItem( `link-${uuid}`, JSON.stringify(encData))
     * }
     * open('ease/#/de-link/'+info.uuid,"_blank")
     * ```
     * @param data
     * @return {Promise<void>}
     */
    async loadItemInfo(data){
      if (!data.info){
        data.info={}
        let d=await ajax.get("ease/shareDetail/"+data.id)
        data.info=d.data
      }
    },
    copyLink(data){
      let a=document.createElement('a')
      a.href = 'ease/#/de-link/'+data.info.uuid
      clipboard({
        text: a.href,
        showSuccessTip: '链接已复制'
      });
    },
    copyPwd(data){
      clipboard({
        text: data.info.pwd,
        showSuccessTip: '密码已复制'
      });
    },
    /**
     * 打开看板，自动填充密码数据
     * @param data
     */
    openBoard(data){
      if (data.info.pwd){
        let uuid=data.info.uuid
        let encData = {
          c: Date.now(),
          e: 253402300799000,
          v: JSON.stringify(data.info.enc)
        }
        localStorage.setItem( `link-${uuid}`, JSON.stringify(encData))
      }
      open('ease/#/de-link/'+data.info.uuid,"_blank")
    }
  }
}

</script>

<template>
  <div class="data-table">
    <div class="data-table-inner">
      <div style="width: 100%;text-align: right">
        <Button v-if="hasControlPer" color="primary" icon="jeicon-setup" @click="openControlBoard">控制面板</Button>
        <Button color="primary" icon="jeicon-refresh" @click="loadData"></Button>
      </div>
      <div style="flex: 1;height: 100%;overflow-y: auto;display: flex">
        <div style="display: flex;flex-wrap: wrap;width: 100%">
          <div v-for="item in dataV" class="screen-item" @mouseover="loadItemInfo(item)">
            <span class="title">{{ item.name }}</span>
            <div class="tips">
              <span class="link" @click="openBoard(item)"><i class="icon-open"/>打开看板</span>
              <span class="link" @click="copyLink(item)"><i class="jeicon-surface-copy"></i>复制链接</span>
              <span v-if="item.info&&item.info.pwd" class="link" @click="copyPwd(item)"><i class="jeicon-surface-copy"></i>复制密码</span>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<style lang="less" scoped>
.screen-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px;
  height: 146px;
  background: url('/img/dp.svg') no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 20px;
  .title{
    color: #0B3C5D;
    font-size: 1.2em;
    font-weight: bold;
  }
  .tips{
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.4);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    .link{
      color: white;
      font-weight: bolder;
      &:hover{
        color: black !important;
      }
    }
  }
  &:hover{
    .title{
      display: none;
    }
    .tips{
      display: flex;
    }
  }
}
</style>
